<script setup lang="ts">
import { getCourseList } from "@/api/lms/studying";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Search from "@iconify-icons/ep/search";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const courseList = ref([]);
const searchStr = ref("");
const onSearch = async () => {
  const p = {
    name: searchStr.value,
    folderId: "0"
  };
  getCourseList(p).then(res => {
    courseList.value = res;
  });
};

const goStudying = (courseId: string) => {
  router.push("/lms/study/studying/index?id=" + courseId);
};

onMounted(() => {
  onSearch();
});
</script>

<template>
  <div class="main">
    <el-card class="h-full min-h-[780px] bg-bg_color overflow-auto">
      <h3>我的课程</h3>
      <el-row style="display: block">
        <el-text class="mx-1" size="large">状态：</el-text>
        <el-button text>全部</el-button>
        <el-button text>未完成</el-button>
        <el-button text>已完成</el-button>
        <el-input
          v-model="searchStr"
          placeholder="按课程名称搜索"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="useRenderIcon(Search)" />
          </template>
        </el-input>
      </el-row>
      <el-divider border-style="dashed" />
      <el-row>
        <el-col
          :span="6"
          v-for="item in courseList"
          :key="item.courseId"
          class="text item"
        >
          <el-card
            style="max-width: 300px; cursor: pointer"
            @click="goStudying(item.id)"
          >
            <el-row style="display: inline-block; width: 100%">
              <img
                src="/src/assets/other/course.png"
                style="width: 50px; display: inline-block"
              />
              <div style="float: right">
                <el-tag color="00a870" effect="dark" style="color: #fff">
                  未完成
                </el-tag>
              </div>
            </el-row>
            <p class="list-card-item_detail--name text-text_color_primary">
              {{ item.name }}
            </p>
            <p class="list-card-item_detail--desc text-text_color_regular">
              {{ item.describe }}
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.input-with-select {
  width: 300px;
  float: inline-end;
}

.list-card-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;

  &_detail {
    flex: 1;
    min-height: 140px;
    padding: 24px 32px;

    &--logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      font-size: 26px;
      color: #0052d9;
      background: #e0ebff;
      border-radius: 50%;

      &__disabled {
        color: #a1c4ff;
      }
    }

    &--operation {
      display: flex;
      height: 100%;

      &--tag {
        border: 0;
      }
    }

    &--name {
      margin: 24px 0 8px;
      font-size: 16px;
      font-weight: 400;
    }

    &--desc {
      display: -webkit-box;
      height: 40px;
      margin-bottom: 24px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  &__disabled {
    .list-card-item_detail--name,
    .list-card-item_detail--desc {
      color: var(--el-text-color-disabled);
    }
  }
}
</style>
